<template>
  <div id="car-container" v-if="carList.length != 0">
    <div class="scontainer">
      <div class="swiper-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide" v-for="car in carList" :key="car.id">
            <!-- <CarItem height="800px" :carData="car"></CarItem> -->
            <CarItem :carData="car"></CarItem>
          </div>
        </div>
        <!-- 如果需要导航按钮 v-if="carList.length >= 4" --> 
        <div class="swiper-button-prev btn"></div>
        <div class="swiper-button-next btn"></div>
      </div>
    </div>
  </div>
</template>

<script>
import "swiper/swiper-bundle.css";
import Swiper from "swiper";
import "swiper/swiper-bundle.esm.js";
import CarItem from './CarItem/CarItem.vue'
import { mapActions, mapMutations, mapState } from 'vuex';
export default {
  name: "Car",
  components: {
    CarItem
  },
  data() {
    return {
      id: this.$route.query.id || localStorage.getItem('id')
    }
  },
  mounted() {
    // 轮播图
    var mySwiper = new Swiper(".swiper-container", {
      slidesPerView: 3,
      // 如果需要前进后退按钮
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
      },
    });
    // this.CLEARCARLIST()    // 解开之后轮播就不行了？？？？？
    this.getCarList(this.id)
  },
  methods: {
    // 获取车辆列表信息根据停车场id
    ...mapActions('carsAbout', ['getCarList']),
    ...mapMutations('carsAbout', ['CLEARCARLIST']),
  },
  computed: {
    ...mapState('carsAbout', ['carList'])
  }
};
</script>

<style lang="scss" scoped>
#car-container {
  position: fixed;
  bottom: 84px;
  left: 50%;
  transform: translate(-50%);
  .scontainer {
    width: 1785px;
    margin: auto;
  }
  .swiper-container {
    // position: relative;
    // padding-left: 50px;
    margin: auto;
    overflow: initial;
    .swiper-slide {
        position: relative;
        width: 505px !important;
        height: 258px;
        margin-right: 90px;
        // z-index: 12;
    }
    .swiper-button-next,
    .swiper-button-prev {
        z-index: 4;
        width: 60px;
        height: 100px;
        background-color: #fff;
        opacity: 1;
        border-radius: 30px;
        cursor: pointer;
        border: 1px solid #e1e1e1;
        box-shadow: 0px rgba(1px, 2px, 1px, 0.2);
    }
    // .f {
    //     margin-left: 115px;
    // }
    .swiper-button-prev:after, .swiper-button-next:after {
        font-size: 20px;
        color: #029ff7;
        font-weight: 700;
        cursor: pointer;
    }
    .swiper-button-prev {
        left: -45px;
        &:hover {
            background-color: #34393f;
        } 
    }
    .swiper-button-next {
        right: -20px;
        &:hover {
            background-color: #34393f;
            color: #029ff7;
        }
    }
  }
}
</style>